<template>
  <van-field :name="name" :label="label" :required="required" :rules="required ? rules : []">
    <template #input>
      <van-checkbox-group v-model="vModelValue" :direction="direction">
        <van-checkbox v-for="item in columns" :key="item.dictValue" :name="item.dictValue" shape="square">
          {{ item.dictLabel }}
        </van-checkbox>
      </van-checkbox-group>
    </template>
  </van-field>
</template>

<script>
import formMixin from './mixin'

export default {
  name: 'FormCheckbox',
  mixins: [formMixin],
  props: {
    value: {
      type: String,
      required: true
    },
    columns: {
      type: Array,
      required: true
    },
    direction: {
      type: String,
      default: 'vertical'
    }
  },
  computed: {
    vModelValue: {
      get() {
        return this.value?.split(',') ?? []
      },
      set(val) {
        this.$emit('change', val?.join() ?? '')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.van-checkbox--vertical {
  &.van-checkbox + &.van-checkbox {
    margin-top: 5px;
  }
}

.flex-direction-col {
  .van-checkbox {
    margin-top: 10px;
    /deep/ {
      .van-checkbox__label {
        transition: color 0.5s;
      }
      .van-checkbox__icon--checked {
        & + .van-checkbox__label {
          color: #1989fa;
        }
      }
    }
  }
}
</style>
